<template>
	<div class="teseguan-box">
		<div class="seachtop">
			<i><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/logo_1.png" alt="" @click="zhuye()" /></i>
			<div class="seachbox"  @click="seachStuta==true&&seachbtn()" :class="{'divboxtran':!seachshow}">
				<div>
					<i class="searchicon"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/icon_search@2x.png" :class="{'imgtrans':!seachshow}"/></i>
					<span class="search-tishi" v-show="seachshow">请输入关键词</span>
					<form action="javascript:;" method="post" v-show="seachinputshow" class="seachfrom">
						<input type="search" id="seach" v-model="seachvalue" @blur="seachremove()" @keyup.enter="seachsend"/>
					</form>
				</div>
			</div>
			<span class="qxsousuo" @click="seachremove" v-show="seachinputshow">取消</span>
		</div>
		<div class="teseguan-top">
			<img :src="'http://www.ntyouxuan.com/'+titlexinxi.img_wap"/>
			<h3 v-text="titlexinxi.recom_name">高平</h3>
			<p v-text="titlexinxi.recom_desc">中华民族人文始祖炎帝的故里中华民族人文始祖炎帝的故里中华民族人文始祖炎帝的故里中华民族人文始祖炎帝的故里中华民族人文始祖炎帝的故里</p>
		</div>
		<h3 class="goods-title">
			<span><img src="../../img-dianpu/allorder@3x.png"/></span>
			<span v-text="titlexinxi.recom_goods_title">高平特色馆</span>
		</h3>
		<ul class="teseg-list">
			<li class="dianpu-item" v-for="item in tsglist">
				<router-link :to="{name:'shopXQ',params:{id:item.goods_id}}">
					<img :src="'http://www.ntyouxuan.com/'+item.default_image"/>
					<h4 class="tsgbt" v-text="item.goods_name">良万家即食罐头蛤蜊肉肉 花蛤花蛤花蛤</h4>
					<span v-text="'￥'+item.price">￥20.00</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data () {
			return{
				seachvalue:'',
				seachStuta:true,
				seachshow:true,
				seachinputshow:false,
				tesegid:'',
				tsglist:[],
				titlexinxi:''
			}
		},
		created:function(){
			this.tesegid=this.$route.query.id;
		},
		methods:{
			seachsend:function(){
				var self=this;
				localStorage.setItem("nt_keyword",self.seachvalue);
				setTimeout(function () {
				  	self.$router.push({path:'/seachall'});
				}, 150);
			},
			zhuye: function() {
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/';
			},
			seachbtn:function(){
				this.seachshow=false;
				var self=this;
				setTimeout(function () {
					self.seachinputshow=true;
				},200)
				setTimeout(function () {
                	document.getElementById('seach').focus()
            	}, 300)
			},
			seachremove:function(){
				this.seachshow=true;
				this.seachinputshow=false;
			},
			tsgajax:function(){
				var self=this;
				$.ajax({
					type:"get",
					url:furl+"index.php?app=ajax_feature&act=index",
					data:{'recom_id':self.tesegid},
					dataType:'json',
					success:function(res){
						self.tsglist=self.tsglist.concat(res.retval.goods_list);
						self.titlexinxi=res.retval.recommend;
					}
				});
			}
		},
		mounted:function(){
			this.tsgajax();
			
			var str=$(".tsgbt").text();//原始字符串
			var s = str;//要展示的字符串
			if(str.length>10){
			  s=str.substring(0,10)+"...";
			}
			$(".tsgbt").text(s);
		}
	}
</script>

<style>
	.teseguan-box{font-size:0;}
	.seachtop>i{display: inline-block;float:left;padding:0.1rem 0.32rem;}
	.seachtop>i>img{width:1.5rem;height:0.4rem;float:left;}
	.seachbox{display: inline-block;}
	.seachbox{height:0.6rem;width:5.05rem;box-sizing: border-box;border: 1px solid #fb9722;border-radius:0.3rem;line-height: 0.58rem;}
	.searchicon>img{width:0.26rem;height:0.26rem;float:left;/*margin-left: 1.5rem;*/transform: translateX(1.5rem);margin-right: 0.14rem;margin-top: 0.16rem;}
	.search-tishi{display:inline-block;color:#fb9722;font-size:0.24rem;}
	
	.teseg-list{background-color:#fff;padding:0rem 0.32rem 0;}
	.qxsousuo{font-size:0.24rem;color:#4C9D31;float:right;display: inline-block;line-height: 0.6rem;margin-right: 0.23rem;}
	@-webkit-keyframes seachtran{
		from{transform: translateX(1.5rem);-webkit-transform: translateX(1.5rem);}
		to{transform: translateX(0.2rem);-webkit-transform: translateX(0.2rem);}
	}
	@keyframes seachtran{
		from{transform: translateX(1.5rem);-webkit-transform: translateX(1.5rem);}
		to{transform: translateX(0.2rem);-webkit-transform: translateX(0.2rem);}
	}
	@-webkit-keyframes seachdivtran{
		from{width:5.05rem;}
		to{width:4.4rem;}
	}
	@keyframes seachdivtran{
		from{width:5.05rem;}
		to{width:4.4rem;}
	}
	.imgtrans{
		animation: seachtran 0.2s ease 1 normal;
		animation-fill-mode:forwards;
		-webkit-animation: seachtran 0.2s ease 1 normal;
		-webkit-animation-fill-mode:forwards;
	}
	.divboxtran{
		animation: seachdivtran 0.2s ease 1 normal;
		animation-fill-mode:forwards;
		-webkit-animation: seachdivtran 0.2s ease 1 normal;
		-webkit-animation-fill-mode:forwards;
	}
	.teseguan-top{width:6.85rem;height:3.2rem;box-sizing: border-box;margin: 1.06rem auto 0;border-radius:0.08rem;overflow: hidden;position:relative;}
	.teseguan-top>img{width:100%;height:100%;}
	.teseguan-top>h3{font-size:0.66rem;color:#fff;position:absolute;top:1.22rem;left:0.21rem;line-height: 0.66rem;font-weight:500;}
	.teseguan-top>p{font-size:0.2rem;color:#fff;position:absolute;top:2.01rem;left:0.19rem;right:0.27rem;line-height: 0.28rem;}
	.goods-title img{width:0.32rem;height:0.32rem;margin-left: 0.32rem;margin-right: 0.23rem;}
	.goods-title{font-size:0.28rem;color:#666;height:0.84rem;box-sizing: border-box;line-height: 0.84rem;}
</style>